<template>
    <div id="app" v-loading="loading">
        <div class="title">H5轮播图</div>
        <el-row :gutter="60">
            <template
                v-for="(h5Item,h5Index) of h5List"
            >
                <el-col :span="5"
                    :key="h5Index + 'h5'"
                >
                    <div class="grid-content bg-purple">
                        <el-upload :show-file-list="false"
                            class="elupload"
                            :action="baseUrl + '/api/console/system/upload'"
                            :headers="{authorizedkey:authorized_key}"
                            :on-success="(response, file, fileList) => h5ImgUpload(response,h5Index,file,fileList)"
                            :data="{
                                bid: createBid()
                            }"
                        >
                            <img :src="isShowImg (h5Item.img)" class="banner_img" />
                        </el-upload>
                        <i class="reset"  @click="handleReset(h5Index,'h5')">重置</i>
                        <div class="info">
                            <!-- <el-radio-group v-model="h5Item.link_type">
                                <el-radio :label="1">外部</el-radio>
                                <el-radio :label="2">内部</el-radio>
                            </el-radio-group> -->
                            <el-input placeholder="请输入执行操作" class="input"
                                v-model="h5Item.url"
                            ></el-input>
                        </div>
                    </div>
                </el-col>
            </template>
        </el-row>


        <div class="title">App轮播图</div>
        <el-row :gutter="60">
            <template
                v-for="(appItem,appIndex) of appList"
            >
                <el-col :span="5"
                    :key="appIndex + 'app'"
                >
                    <div class="grid-content bg-purple">
                    <el-upload :show-file-list="false" class="elupload"
                            :action="baseUrl + '/api/console/system/upload'"
                            :headers="{authorizedkey:authorized_key}"
                            :on-success="(response, file, fileList) => appImgUpload(response,appIndex,file,fileList)"
                            :data="{
                                bid: createBid()
                            }"
                    >
                        <img :src="isShowImg(appItem.img)" class="banner_img" />
                    </el-upload>
                    <i class="reset"
                        @click="handleReset(appIndex,'app')"
                    >重置</i>
                    <div class="info">
                        <!-- <el-radio-group v-model="appItem.link_type">
                            <el-radio :label="1">外部</el-radio>
                            <el-radio :label="2">内部</el-radio>
                        </el-radio-group> -->
                        <el-input placeholder="请输入执行操作" class="input"
                            v-model="appItem.url"
                        ></el-input>
                    </div>
                    </div>
                </el-col>
            </template>
        </el-row>

		<div class="title">App我的页面轮播图</div>
		<el-row :gutter="60">
		    <template
		        v-for="(appItem,appIndex) of home_app"
		    >
		        <el-col :span="5"
		            :key="appIndex + 'home_app'"
		        >
		            <div class="grid-content bg-purple">
		            <el-upload :show-file-list="false" class="elupload"
		                    :action="baseUrl + '/api/console/system/upload'"
		                    :headers="{authorizedkey:authorized_key}"
		                    :on-success="(response, file, fileList) => appHomeImgUpload(response,appIndex,file,fileList)"
		                    :data="{
		                        bid: createBid()
		                    }"
		            >
		                <img :src="isShowImg(appItem.img)" class="banner_img" />
		            </el-upload>
					<i class="reset"
					    @click="handleReset(appIndex,'home_app')"
					>重置</i>
		            <div class="info">
		                <!-- <el-radio-group v-model="appItem.link_type">
		                    <el-radio :label="1">外部</el-radio>
		                    <el-radio :label="2">内部</el-radio>
		                </el-radio-group> -->
		                <el-input placeholder="请输入执行操作" class="input"
		                    v-model="appItem.url"
		                ></el-input>
		            </div>
		            </div>
		        </el-col>
		    </template>
		</el-row>

    <div class="title">App浮标配置</div>
    <el-row :gutter="60">
        <template
            v-for="(appItem,appIndex) of app_sigin"
        >
            <el-col :span="5"
                :key="appIndex + 'app_sigin'"
            >
                <div class="grid-content bg-purple">
                <el-upload :show-file-list="false" class="elupload"
                        :action="baseUrl + '/api/console/system/upload'"
                        :headers="{authorizedkey:authorized_key}"
                        :on-success="(response, file, fileList) => appHomeFloatUpload(response,appIndex,file,fileList)"
                        :data="{
                            bid: createBid()
                        }"
                >
                    <img :src="isShowImg(appItem.img)" class="banner_img" />
                </el-upload>
                <div class="info">
                    <el-input placeholder="请输入执行操作" class="input"
                        v-model="appItem.url"
                    ></el-input>
                </div>
                </div>
            </el-col>
        </template>
    </el-row>


        <div class="title">H5Banner</div>
        <el-row :gutter="60">
            <template
                v-for="(bannerItem,bannerIndex) of h5Banner"
            >
                <el-col :span="5"
                    :key="bannerIndex + 'h5Ban'"
                >
                    <div class="grid-content bg-purple">
                    <el-upload :show-file-list="false" class="elupload"
                        :action="baseUrl + '/api/console/system/upload'"
                        :headers="{authorizedkey:authorized_key}"
                        :on-success="(response, file, fileList) => h5BannerImgUpload(response,bannerIndex,file,fileList)"
                        :data="{
                            bid: createBid()
                        }"
                    >
                        <img :src="isShowImg(bannerItem.img)" class="s_img" />
                    </el-upload>
                    <div class="info">
                        <!-- <el-radio-group v-model="bannerItem.link_type">
                            <el-radio :label="1">外部</el-radio>
                            <el-radio :label="2">内部</el-radio>
                        </el-radio-group> -->
                        <el-input placeholder="请输入执行操作" class="input"
                            v-model="bannerItem.url"
                        ></el-input>
                    </div>
                    </div>
                </el-col>
            </template>
        </el-row>

        <div class="title">AppBanner</div>
        <el-row :gutter="60">
            <template
                v-for="(bannerItem,bannerIndex) of banner"
            >
                <el-col :span="5"
                    :key="bannerIndex + 'banner'"
                >
                    <div class="grid-content bg-purple">
                    <el-upload :show-file-list="false" class="elupload"
                        :action="baseUrl + '/api/console/system/upload'"
                        :headers="{authorizedkey:authorized_key}"
                        :on-success="(response, file, fileList) => bannerImgUpload(response,bannerIndex,file,fileList)"
                        :data="{
                            bid: createBid()
                        }"
                    >
                        <img :src="isShowImg(bannerItem.img)" class="s_img" />
                    </el-upload>
                    <div class="info">
                        <!-- <el-radio-group v-model="bannerItem.link_type">
                            <el-radio :label="1">外部</el-radio>
                            <el-radio :label="2">内部</el-radio>
                        </el-radio-group> -->
                        <el-input placeholder="请输入执行操作" class="input"
                            v-model="bannerItem.url"
                        ></el-input>
                    </div>
                    </div>
                </el-col>
            </template>
        </el-row>

        <div class="title">H5Nav</div>
        <el-row :gutter="60">
            <template v-for="(navItem,navIndex) of h5Nav" >
                <el-col :span="5" :key="navIndex + 'h5nav'" >
                    <div class="grid-content bg-purple">
                    <el-upload :show-file-list="false" class="elupload"
                        :action="baseUrl + '/api/console/system/upload'"
                        :headers="{authorizedkey:authorized_key}"
                        :on-success="(response, file, fileList) => h5NavImgUpload(response,navIndex,file,fileList)"
                        :data="{bid: createBid()}"
                    >
                        <img :src="isShowImg(navItem.img)" class="s_img" />
                    </el-upload>
                    <div class="info">
                        <!-- <el-radio-group v-model="navItem.link_type">
                            <el-radio :label="1">外部</el-radio>
                            <el-radio :label="2">内部</el-radio>
                        </el-radio-group> -->
                        <el-input placeholder="请输入标题" class="input"
                            v-model="navItem.title"
                        ></el-input>
                        <el-input placeholder="请输入执行操作" class="input"
                            v-model="navItem.url"
                        ></el-input>
                    </div>
                    </div>
                </el-col>
            </template>
        </el-row>

        <div class="title">AppNav</div>
        <el-row :gutter="60">
            <template
                v-for="(bannerItem,bannerIndex) of appNav"
            >
                <el-col :span="5"
                    :key="bannerIndex + 'appnav'"
                >
                    <div class="grid-content bg-purple">
                    <el-upload :show-file-list="false" class="elupload"
                        :action="baseUrl + '/api/console/system/upload'"
                        :headers="{authorizedkey:authorized_key}"
                        :on-success="(response, file, fileList) => appNavImgUpload(response,bannerIndex,file,fileList)"
                        :data="{
                            bid: createBid()
                        }"
                    >
                        <img :src="isShowImg(bannerItem.img)" class="s_img" />
                    </el-upload>
                    <div class="info">
                        <!-- <el-radio-group v-model="bannerItem.link_type">
                            <el-radio :label="1">外部</el-radio>
                            <el-radio :label="2">内部</el-radio>
                        </el-radio-group> -->
                        <el-input placeholder="请输入标题" class="input"
                            v-model="bannerItem.title"
                        ></el-input>
                        <el-input placeholder="请输入执行操作" class="input"
                            v-model="bannerItem.url"
                        ></el-input>
                    </div>
                    </div>
                </el-col>
            </template>
        </el-row>

        <el-button type="primary" style="margin-top:60px;"
            @click="editHomePiceApi"
        >立即保存</el-button>
    </div>
</template>

<script>
    import IndexShow from './index.js';
    export default IndexShow;
</script>
<style lang="scss" scoped>
.el-row{
    display: flex;
    justify-content: flex-start;
}
  .title{
    margin-bottom:25px;
    font-size:21px;
    margin-top:65px;
  }
  .info{
    margin-top:25px;
    .input{
      margin-top:18px;
    }
  }
  .banner_img{
    border-radius:5px;
    width: 100%;
    height: 150px;
  }
  .s_img{
    display: block;
    height: 150px;
  }
  .grid-content{
    position:relative;
  }
  .reset{
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 1;
    font-size: 12px;
    font-style: normal;
    background: rgba(0,0,0,0.2);
    color: #FFF;
    padding: 3px 2px 3px 6px;
    border-radius: 15px 0px 0px 15px;
}
</style>
